import { Modal, Pagination, Table } from 'antd'
import styles from '../../assets/css/ChineseWesternMedicine/PrescriptionManagement.module.css'
import { ProfileTwoTone } from '@ant-design/icons';
import { getRecipelList, getRecipeInfo } from '../../api/ChineseWesternMedicine/PrescriptionManagement'
import { useEffect, useState } from 'react';


export default function PrescriptionManagement() {
  const [total, setTotal] = useState(0)
  const [tableData, setTableData] = useState([])
  const [open, setOpen] = useState(false);
  const [infoData, setInfoData] = useState([])
  const [price, setPrice] = useState(0)
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
  });
  const columns = [
    {
      title: '医生头像',
      dataIndex: 'head',
      render: (text) => {
        return <img
          src={text}
          alt="医生头像"
          style={{ width: '50px', height: '50px', borderRadius: '50%' }}
        />
      }
    },
    {
      title: '医生名称',
      dataIndex: 'name',
    },
    {
      title: '科室',
      dataIndex: 'department',
    },
    {
      title: '处方金额',
      dataIndex: 'price',
    },
    {
      title: '操作',
      dataIndex: 'click',
      render: (text, record) => {
        return <ProfileTwoTone onClick={() => handleInfo(record.id)} />
      }
    },
  ];

  const columnsInfo = [
    {
      title: '药品名称',
      dataIndex: 'drugsname',
    },
    {
      title: '药品类型',
      dataIndex: 'sort',
    },
    {
      title: '药品图片',
      dataIndex: 'img',
      render: (url) => {
        return <img src={url} alt="药品图片" style={{ width: '50px', height: '50px' }} />
      }
    },
    {
      title: '药品规格',
      dataIndex: 'type',
    },
    {
      title: '药品单价',
      dataIndex: 'price'
    },
    {
      title: '药品数量',
      dataIndex: 'count',
    },
    {
      title: '有效期',
      dataIndex: 'endtime'
    },
    {
      title: '用量备注',
      dataIndex: 'other'
    }
  ]

  const handleInfo = async (id) => {
    const res = await getRecipeInfo({ id })

    setInfoData(JSON.parse(res.data[0].recipel.replace(/'/g, '"')))
    setPrice(res.data[0].price)
    setOpen(true)
  }

  useEffect(() => {
    getRecipelList({ page: pagination.current, size: pagination.pageSize })
      .then(res => {
        setTableData(res.data)
        setTotal(res.total)
      })
  }, [pagination])
  return (
    <div className={styles.body}>
      <Table rowKey={(record) => record.id} columns={columns} dataSource={tableData} size="middle" pagination={false} />
      <Pagination
        {...pagination}
        showSizeChanger
        pageSizeOptions={['5', '10', '15']}
        showTotal={() => `总条数：${total} 条`}
        onShowSizeChange={(_current, pageSize) => {
          setPagination({
            current: 1,
            pageSize,
          });
        }}
        onChange={(page, pageSize) => {
          setPagination({
            current: page,
            pageSize: pageSize || pagination.pageSize,
          });
        }}
        total={total} />
      <Modal
        title="处方详情"
        centered
        open={open}
        footer={()=><p>总价：{price}</p>}
        onOk={() => setOpen(false)}
        onCancel={() => setOpen(false)}
        width={800}
        height={500}
      >
        <Table rowKey={(record) => record.id} columns={columnsInfo} dataSource={infoData} size="middle" pagination={false} />
      </Modal>
    </div>
  )
}
